<script setup lang="ts">
import { onMounted, ref } from 'vue';

const currentYear = new Date().getFullYear();
const runningTime = ref('0天0小时0分0秒');

// 定义技术栈数据
const techStacks = [
  {
    name: '京东云',
    type: 'CVM服务器',
    theme: 'blue'
  },
  {
    name: 'Vue',
    version: '3',
    type: '前端框架',
    theme: 'vue-green'
  },
  {
    name: 'ElasticSearch',
    version: '7.12.1',
    type: '全文检索引擎',
    theme: 'yellow'
  },
  {
    name: 'SpringBoot',
    version: '2.7',
    theme: 'spring-green'
  },
  {
    name: 'minio',
    type: '对象存储系统',
    theme: 'purple'
  }
];

// 计算网站运行时间
const calculateRunningTime = () => {
  const startTime = new Date('2025-01-01').getTime(); // 设置你的网站开始时间
  const currentTime = new Date().getTime();
  const runningTimeMillis = currentTime - startTime;

  const days = Math.floor(runningTimeMillis / (24 * 60 * 60 * 1000));
  const hours = Math.floor((runningTimeMillis % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000));
  const minutes = Math.floor((runningTimeMillis % (60 * 60 * 1000)) / (60 * 1000));
  const seconds = Math.floor((runningTimeMillis % (60 * 1000)) / 1000);

  runningTime.value = `${days}天${hours}时${minutes}分${seconds}秒`;
};

// 更新运行时间
onMounted(() => {
  calculateRunningTime();
  setInterval(calculateRunningTime, 1000);
});
</script>

<template>
  <footer
    class="site-footer"
    v-motion
    :initial="{ opacity: 0, y: 20 }"
    :enter="{
      opacity: 1,
      y: 0,
      transition: { delay: 1000 }
    }"
  >
    <div class="footer-content">
      <div class="footer-main">
        <div class="footer-info">
          <!-- Logo和标语 -->
          <div class="site-info">
            <span class="logo-text">St✧rMist</span>
            <span class="divider">·</span>
            <span class="slogan">分享技术 记录生活</span>
          </div>

          <!-- 技术栈展示 -->
          <div class="tech-stack">
            <div
              v-for="(tech, index) in techStacks"
              :key="index"
              class="tech-item"
              :class="tech.theme"
            >
              {{ tech.name }}
              <span v-if="tech.version">{{ tech.version }}</span>
              <span v-if="tech.type" class="tech-type">{{ tech.type }}</span>
            </div>
          </div>

          <!-- 运行时间和访问统计 -->
          <div class="site-stats">
            <span>风雨雨雨 {{ runningTime }}</span>
            <span class="divider">|</span>
            <span>总访问量 3455</span>
          </div>

          <!-- 版权信息 -->
          <div class="copyright-info">
            <span>Copyright © {{ currentYear }} St✧rMist Blog</span>
            <span class="divider">|</span>
            <span class="powered-by">Powered by Vue.js</span>
            <span class="divider">|</span>
            <a
              href="https://beian.miit.gov.cn/"
              target="_blank"
              rel="nofollow"
              class="beian"
            >
              鲁ICP备2025146397号-1
            </a>
          </div>
        </div>
      </div>
    </div>
  </footer>
</template>

<style lang="less" scoped>
.site-footer {
  margin-top: auto;
  padding: 16px 0;
  background: #fff;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05);
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
    transparent 0%,
    rgba(var(--primary-color-rgb), 0.2) 50%,
    transparent 100%
    );
  }

  .footer-content {
    max-width: 1161px;
    margin: 0 auto;
  }

  .footer-main {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .footer-info {
    text-align: center;

    .site-info {
      margin-bottom: 12px;

      .logo-text {
        font-size: 16px;
        font-weight: 600;
        color: #3B82F6;
      }

      .slogan {
        font-size: 14px;
        color: #666;
      }

      .divider {
        margin: 0 8px;
        color: #ddd;
      }
    }

    .tech-stack {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin: 12px 0;
      flex-wrap: wrap;

      .tech-item {
        display: inline-flex;
        align-items: center;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
        color: #fff;
        background: #666;

        .tech-type {
          margin-left: 4px;
          opacity: 0.9;
        }

        // 主题色
        &.blue {
          background: #1890ff;
        }
        &.vue-green {
          background: #42b883;  // Vue 的主色调
          color: #fff;
        }
        &.green {
          background: #52c41a;
        }
        &.yellow {
          background: rgba(26, 26, 26, 0.7);
          color: #ffffff;
        }
        &.spring-green {
          background: #6db33f;
        }

        &.purple {
          background: #722ed1;
        }
      }
    }

    .site-stats {
      color: #999;
      font-size: 13px;
      margin: 12px 0;

      .divider {
        margin: 0 8px;
        color: #ddd;
      }
    }

    .copyright-info {
      color: #999;
      font-size: 13px;

      .divider {
        margin: 0 8px;
        color: #ddd;
      }

      .beian {
        color: #999;
        text-decoration: none;
        transition: color 0.3s;

        &:hover {
          color: #3B82F6;
        }
      }
    }
  }
}

// 暗黑模式
@media (prefers-color-scheme: dark) {
  .site-footer {
    background: #1a1a1a;
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.05);

    &::before {
      background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.1) 50%,
      transparent 100%
      );
    }

    .footer-info {
      .site-info {
        .slogan {
          color: #999;
        }

        .divider {
          color: #333;
        }
      }

      .tech-stack {
        .tech-item {
          opacity: 0.9;
        }
      }

      .site-stats,
      .copyright-info {
        color: #666;

        .divider {
          color: #333;
        }

        .beian {
          color: #666;

          &:hover {
            color: var(--primary-color);
          }
        }
      }
    }
  }
}

// 响应式设计
// 移动端响应式优化
@media (max-width: 768px) {
  padding: 16px 0;

  .footer-content {
    width: 92%;
    margin: 0 auto;
    padding: 0;

    .footer-info {
      .site-info {
        margin-bottom: 10px;

        .logo-text {
          font-size: 15px;
        }

        .slogan {
          font-size: 13px;
        }

        .divider {
          margin: 0 6px;
        }
      }

      .tech-stack {
        gap: 6px;
        margin: 10px 0;
        padding: 0 8px;

        .tech-item {
          padding: 3px 6px;
          font-size: 11px;

          .tech-type {
            margin-left: 3px;
          }
        }
      }

      .site-stats {
        font-size: 12px;
        margin: 10px 0;
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;

        .divider {
          margin: 0 6px;
          color: #ddd;
          display: none;  // 隐藏分隔符
        }
      }

      .copyright-info {
        font-size: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;

        .divider {
          display: none;  // 隐藏分隔符
        }

        .beian {
          margin-top: 4px;
        }
      }
    }
  }
}

@media (max-width: 576px) {
  .site-footer {
    padding: 12px 0;

    .footer-content {
      width: 90%;

      .footer-info {
        .site-info {
          .logo-text {
            font-size: 14px;
          }

          .slogan {
            font-size: 12px;
          }
        }

        .tech-stack {
          gap: 5px;
          margin: 8px 0;

          .tech-item {
            padding: 2px 5px;
            font-size: 10px;
          }
        }

        .site-stats {
          font-size: 11px;
          gap: 6px;
        }

        .copyright-info {
          font-size: 11px;
          gap: 4px;
        }
      }
    }
  }
}

// 横屏优化
@media screen and (orientation: landscape) and (max-height: 576px) {
  .site-footer {
    padding: 10px 0;

    .footer-content {
      .footer-info {
        .tech-stack {
          margin: 6px 0;
        }

        .site-stats,
        .copyright-info {
          margin: 6px 0;
        }
      }
    }
  }
}
</style>
